<template>

姓名：<input type="text" v-model="FenYe.Name">

服务：<select v-model="FenYe.Tid">
    <option :value="-1">--请选择---</option>
<option v-for="item in XiaLa" :value="item.fuwu_Id">{{ item.fuwu_name }}</option>
</select>

<button @click="Show1">搜索</button>

<button @click="PiLiangIsDel" class="btn btn-success">批量删除</button>
<button @click="PiLiangUpdate" class="btn btn-success">批量修改</button>

<table class="table table-bordered">
<thead>
    <tr>    
<th><input type="checkbox" v-model="QuanXuan" @change="QuanXuan1"></th>
<th>门店id</th>
<th>门店名称</th>
<th>门店图片</th>
<th>门店地址</th>
<th>联系电话</th>
<th>门店logo</th>
<th>服务</th>
<th>营业时间</th>
<th>状态</th>
<th>操作</th>  
</tr>
</thead>

<tbody>


    <tr v-for="item in Show">    
<th><input type="checkbox" v-bind:checked="FanXuan" :value="item.shop_Id" v-model="addres" ></th>
<th>{{ item.shop_Id }}</th>
<th>{{ item.shop_Name }}</th>
<th><img :src="item.shop_Img" style="width: 60px;height: 60px;"></th>
<th>{{ item.shop_Address }}</th>
<th>{{ item.shop_Phone }}</th>
<th><img :src="item.shop_Logo" style="width: 60px; height: 60px;"></th>
<th>{{ item.fuWu_Id }}</th>
<th>{{ moment(item.shop_Ctime).format('hh:mm:ss') }}~{{ moment(item.shop_Stime).format('hh:mm:ss') }}</th>
<th>{{ item.shop_State?"启用":"禁用" }}</th>
<th><button @click="IsDel(item.shop_Id.toString())" class="btn btn-success">删除</button>
    <button @click="Update(item.shop_Id.toString())" class="btn btn-success">修改状态</button>
    <a href="#" @click="up(item.shop_Id)" class="btn btn-success">修改</a>
</th>  
</tr>


</tbody>
</table>

共{{FenYe.Count}}数，每页{{FenYe.m}}条，共{{FenYe.Zy}}/{{FenYe.s}}页


<button @click="Fenye1('S')" class="btn btn-success">首页</button>

<button @click="Fenye1('L')" class="btn btn-success">上一页</button>
第<span style="color: red;" class="btn btn-success">{{FenYe.s  }} </span>页
<button @click="Fenye1('N')" class="btn btn-success">下一页</button>

<button @click="Fenye1('M')" class="btn btn-success">尾页</button>




</template>

<script setup lang="ts">


import axios from "axios";
import {onMounted, ref} from "vue";

import  moment  from "moment";
onMounted(()=>{  ///钩子函数
    XiaLa1();
Show1();
})

const FenYe =ref({  //分页和查询用的条件

 s:1,
 m:3,
 Zy:0,
 Count:0,
 Name:"",
 Tid:-1,

})



const Show =ref([{  //接收数据的响应式函数
    "shop_Id": 1,
      "shop_Name": "1",
      "shop_Img": "11",
      "shop_Address": "1",
      "shop_Phone": "1",
      "shop_Logo": "1",
      "fuWu_Id": 1,
      "shop_Ctime": null,
      "shop_Stime": null,
      "shop_State": true,
      "shop_IsDel": true


}])


const Show1=()=>{   //显示方法
 
    axios.get('https://localhost:7151/api/Shop/ShowShop',{params:{
        s:FenYe.value.s,
        m:FenYe.value.m,
        Name:FenYe.value.Name,
        Tid:FenYe.value.Tid,

        
    }}).then(res=>{

        Show.value=res.data.data;
        FenYe.value.Count=res.data.count;
        FenYe.value.Zy=res.data.zy;


    })

}



const XiaLa=ref([{    //下拉的响应式函数
 
 "fuwu_Id": 1,
    "fuwu_name": "小服务"


}])

const XiaLa1=()=>{   //下拉的方法


    axios.get('https://localhost:7151/api/Shop/ShowFuwu').then(res=>{

        XiaLa.value=res.data;

    })
}



const Fenye1 =(chool:string )=>{  //分页的方法
 

    switch(chool){

        case'S':
            FenYe.value.s=1;
        break;
        case'M':
            FenYe.value.s=FenYe.value.Zy;
        break;

        case'L':
            if(FenYe.value.s<=1)
            {
                alert('已经是第一页了')
                return ;
            }
            FenYe.value.s-=1;
        break;
        case'N':
            if(FenYe.value.s>=FenYe.value.Zy)
            {
                alert('已经是最后一页了')
                return ;
            }
            FenYe.value.s+=1;
        break;

    };
    Show1();

}





const QuanXuan=ref(false); ///全选的响应式函数

const FanXuan=ref(false) //反选的响应式函数

const addres :any=ref([]) //存id的数组



const QuanXuan1 =()=>{  //全选全取消的方法

    if(QuanXuan.value)
{
    FanXuan.value=true;
    addres.value=Show.value.map((item:any)=>{

        return item.shop_Id;
    })

    
    
}
else
{
    FanXuan.value=false;

}



}




const IsDel=(id:string)=>{   //删除方法

    alert(id);
    if(!confirm("确定删除吗"))
{
    return ;
}
    

    axios.delete('https://localhost:7151/api/Shop/IsDel',{params:{

        id:id

    }}).then(res=>{
        if(res.data>0)
    {
        alert('删除成功')
        Show1();
    }
    else
    {
        alert('删除失败')
    }
    })


}



const PiLiangIsDel=()=>{  //批量删除方法
   

    if(addres.value.length==0)
{
    alert('请选择要删除的内容')
    return ;
}

    IsDel(addres.value.toString());



}



const Update=(id:string)=>{   //删除方法

alert(id);
if(!confirm("确定修改吗"))
{
return ;
}


axios.get('https://localhost:7151/api/Shop/IsState',{params:{

    id:id

}}).then(res=>{
    if(res.data>0)
{
    alert('修改成功')
    Show1();
}
else
{
    alert('修改失败')
}
})


}


const PiLiangUpdate=()=>{  //批量删除方法
   

   if(addres.value.length==0)
{
   alert('请选择要修改的内容')
   return ;
}

Update(addres.value.toString());



}

import { useRouter,createRouter } from "vue-router";

const router=useRouter();
const up =(id:number)=>{  //跳转方法

    router.push({

        name:'UpdateShow',
        params:{

            id:id
        }


    })

}

</script>